<template>
  <div class="head_class_setting" @click="clickHandler">
    <img src="../../assets/head.png" />
  </div>
  <div class="head_class" v-if="showHead">
    <div class="head_button">
      <div
        style="display: flex; justify-content: center; align-items: center"
        v-for="(item, index) in headItems"
      >
        <HeadItem
          :imageSrc="require('../../assets/' + item.src + '.png')"
          :buttonText="item.text"
          showPadding
        ></HeadItem>
        <Division height="2vh" v-if="index < headItems.length - 1" />
      </div>
      <div class="head_setting">
        <HeadItem
          :imageSrc="require('../../assets/设置_1.png')"
          buttonText="设置"
        ></HeadItem>
      </div>
    </div>
    <div class="head_search">
      <div class="head_search_logo">
        <img src="../../assets/cetcd_logo.png" alt="Description of the image" />
      </div>
      <el-input
        style="width: 40vw; margin-top: 0vh; height: 4vh"
        size="large"
        placeholder="Search"
        :suffix-icon="Search"
      />
      <div class="head_search_airplane">
        <img src="../../assets/airplane.png" alt="Description of the image" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { Search } from "@element-plus/icons-vue";
import HeadItem from "@/components/HeadItem/index.vue";
import { reactive, ref, getCurrentInstance } from "vue";
import Division from "@/components/Division/index.vue";

const bus = getCurrentInstance().appContext.config.globalProperties.$bus;

const headItems = reactive([
  { src: "购买_1", text: "购买" },
  { src: "联系我们_1", text: "联系我们" },
  { src: "通知_1", text: "通知" },
  { src: "工卡_1", text: "工卡" },
  { src: "帮助_1", text: "帮助" },
  { src: "主页_1", text: "主页" },
]);

const showHead = ref(true);
const clickHandler = async () => {
  showHead.value = !showHead.value;
  bus.emit("head", showHead.value);
};
</script>

<style scoped>
.head_class_setting {
  display: flex;
  justify-content: center;
  cursor: pointer;
}

.head_class {
  height: 8vh;
  border-bottom: 0.1vh solid #000; /* 下边框为黑色，宽度为2像素 */
}
.head_button {
  display: flex;
  justify-content: space-between; /* 左右两侧对齐，中间留有空间 */
  height: 3vh;
  background-color: #f5f5f5;
}

.head_setting {
  display: flex;
  height: 100%;
  margin-left: auto; /* 将右侧内容推到最右边 */
  margin-right: 1vw;
}
.head_search {
  display: flex;
  height: 5vh;
  justify-content: space-between; /* 控制子元素在主轴上的分散排布 */
  align-items: center;
}
.head_search_logo {
  height: 5vh;
  margin-left: 20px;
}
.head_class img {
  height: 5vh;
}
.head_search_airplane {
  margin-right: 20px;
}
</style>
